<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="车号" prop="carNo">
        <el-input v-model="queryParams.carNo" placeholder="请输入车号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="车辆品牌" prop="carBrand">
        <el-input v-model="queryParams.carBrand" placeholder="请输入车辆品牌" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="车牌" prop="carPlate">
        <el-input v-model="queryParams.carPlate" placeholder="请输入车牌" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- <el-form-item label="车辆年限" prop="carYear">
        <el-input v-model="queryParams.carYear" placeholder="请输入车辆年限" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="车型" prop="carModel">
        <el-input v-model="queryParams.carModel" placeholder="请输入车型" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="吨位" prop="carWeight">
        <el-input v-model="queryParams.carWeight" placeholder="请输入吨位" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="收费标准" prop="basicCharge">
        <el-input v-model="queryParams.basicCharge" placeholder="请输入收费标准" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="数量" prop="carQty">
        <el-input v-model="queryParams.carQty" placeholder="请输入数量" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="位置坐标" prop="location">
        <el-input v-model="queryParams.location" placeholder="请输入位置坐标" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="主臂长" prop="mainArmLength">
        <el-input v-model="queryParams.mainArmLength" placeholder="请输入主臂长" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="参数" prop="mainArmParam">
        <el-input v-model="queryParams.mainArmParam" placeholder="请输入参数" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="最大起重" prop="holdWeight">
        <el-input v-model="queryParams.holdWeight" placeholder="请输入最大起重" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="年检时间" prop="checkTime">
        <el-date-picker clearable v-model="queryParams.checkTime" type="date" value-format="yyyy-MM-dd"
          placeholder="请选择年检时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="保险" prop="insurance">
        <el-input v-model="queryParams.insurance" placeholder="请输入保险" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="责任人ID" prop="chargePersonId">
        <el-input v-model="queryParams.chargePersonId" placeholder="请输入责任人ID" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="责任人名称" prop="chargePersonName">
        <el-input v-model="queryParams.chargePersonName" placeholder="请输入责任人名称" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="锁车状态，0：未锁车，1：锁车" prop="lockState">
        <el-input v-model="queryParams.lockState" placeholder="请输入锁车状态，0：未锁车，1：锁车" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item> -->
      <el-form-item label="状态" prop="workState">
        <el-input v-model="queryParams.workState" placeholder="请输入状态" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="发动机品牌" prop="engineBrand">
        <el-input v-model="queryParams.engineBrand" placeholder="请输入发动机品牌" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="油箱" prop="oilCap">
        <el-input v-model="queryParams.oilCap" placeholder="请输入油箱" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="工作尺寸" prop="carWorkSize">
        <el-input v-model="queryParams.carWorkSize" placeholder="请输入工作尺寸" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="现场工况" prop="workEnv">
        <el-input v-model="queryParams.workEnv" placeholder="请输入现场工况" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="副臂" prop="copyArm">
        <el-input v-model="queryParams.copyArm" placeholder="请输入副臂" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="位置更新时间" prop="locationUpdateTime">
        <el-date-picker clearable v-model="queryParams.locationUpdateTime" type="date" value-format="yyyy-MM-dd"
          placeholder="请选择位置更新时间">
        </el-date-picker>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['system:detail:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['system:detail:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['system:detail:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" icon="el-icon-upload2" size="mini" @click="handleImport">导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['system:detail:export']">导出</el-button>
      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="detailList" @selection-change="handleSelectionChange" @row-dblclick="dbclick">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="ID" align="center" prop="id" />
      <el-table-column label="车号" align="center" prop="carNo" />
      <el-table-column label="车辆品牌" align="center" prop="carBrand" />
      <el-table-column label="车牌" align="center" prop="carPlate" />
      <el-table-column label="收费标准" align="center" prop="basicCharge" />
      <el-table-column label="数量" align="center" prop="carQty" />
      <el-table-column label="位置" align="center" prop="address" />
      <el-table-column label="主臂长" align="center" prop="mainArmLength" />
      <el-table-column label="最大起重" align="center" prop="holdWeight" />
      <el-table-column label="状态" align="center" prop="workState" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center" prop="updateTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="车辆年限" align="center" prop="carYear" />
      <el-table-column label="车型" align="center" prop="carModel" />
      <el-table-column label="吨位" align="center" prop="carWeight" />
      <el-table-column label="位置坐标" align="center" prop="location" />
      <el-table-column label="参数" align="center" prop="mainArmParam" />
      <el-table-column label="年检时间" align="center" prop="checkTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.checkTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="保险" align="center" prop="insurance" />
      <el-table-column label="责任人ID" align="center" prop="chargePersonId" />
      <el-table-column label="责任人名称" align="center" prop="chargePersonName" />
      <el-table-column label="锁车状态，0：未锁车，1：锁车" align="center" prop="lockState" />
      <el-table-column label="发动机品牌" align="center" prop="engineBrand" />
      <el-table-column label="发动机描述" align="center" prop="engineDesc" />
      <el-table-column label="油箱" align="center" prop="oilCap" />
      <el-table-column label="行驶尺寸" align="center" prop="carDriveSize" />
      <el-table-column label="工作尺寸" align="center" prop="carWorkSize" />
      <el-table-column label="现场工况" align="center" prop="workEnv" />
      <el-table-column label="副臂" align="center" prop="copyArm" />
      <el-table-column label="大钩" align="center" prop="bigHook" />
      <el-table-column label="小钩" align="center" prop="smallHook" />
      <el-table-column label="位置更新时间" align="center" prop="locationUpdateTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.locationUpdateTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column> -->

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['system:detail:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['system:detail:remove']">删除</el-button>
          <el-button size="mini" type="text" icon="el-icon-s-tools" @click="handleRepair(scope.row)"
            v-hasPermi="['system:detail:edit']">车辆维护</el-button>
          <el-button size="mini" type="text" icon="el-icon-check" @click="handleAccept(scope.row)"
            v-hasPermi="['system:detail:remove']">车辆验收</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改吊车列对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="车号" prop="carNo">
          <el-input v-model="form.carNo" placeholder="请输入车号" />
        </el-form-item>
        <el-form-item label="车辆品牌" prop="carBrand">
          <el-input v-model="form.carBrand" placeholder="请输入车辆品牌" />
        </el-form-item>
        <el-form-item label="车牌" prop="carPlate">
          <el-input v-model="form.carPlate" placeholder="请输入车牌" />
        </el-form-item>
        <el-form-item label="车辆年限" prop="carYear">
          <el-input v-model="form.carYear" placeholder="请输入车辆年限" />
        </el-form-item>
        <el-form-item label="车型" prop="carModel">
          <el-input v-model="form.carModel" placeholder="请输入车型" />
        </el-form-item>
        <el-form-item label="吨位" prop="carWeight">
          <el-input v-model="form.carWeight" placeholder="请输入吨位" />
        </el-form-item>
        <el-form-item label="收费标准" prop="basicCharge">
          <el-input v-model="form.basicCharge" placeholder="请输入收费标准" />
        </el-form-item>
        <el-form-item label="数量" prop="carQty">
          <el-input v-model="form.carQty" placeholder="请输入数量" />
        </el-form-item>
        <el-form-item label="位置" prop="address">
          <el-input v-model="form.address" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="位置坐标" prop="location">
          <el-input v-model="form.location" placeholder="请输入位置坐标" />
        </el-form-item>
        <el-form-item label="主臂长" prop="mainArmLength">
          <el-input v-model="form.mainArmLength" placeholder="请输入主臂长" />
        </el-form-item>
        <el-form-item label="最大起重" prop="holdWeight">
          <el-input v-model="form.holdWeight" placeholder="请输入最大起重" />
        </el-form-item>
        <el-form-item label="年检时间" prop="checkTime">
          <el-date-picker clearable v-model="form.checkTime" type="date" value-format="yyyy-MM-dd"
            placeholder="请选择年检时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="保险" prop="insurance">
          <el-input v-model="form.insurance" placeholder="请输入保险" />
        </el-form-item>
        <el-form-item label="责任人ID" prop="chargePersonId">
          <el-input v-model="form.chargePersonId" placeholder="请输入责任人ID" />
        </el-form-item>
        <el-form-item label="责任人名称" prop="chargePersonName">
          <el-input v-model="form.chargePersonName" placeholder="请输入责任人名称" />
        </el-form-item>
        <!-- <el-form-item label="锁车状态，0：未锁车，1：锁车" prop="lockState">
          <el-input v-model="form.lockState" placeholder="请输入锁车状态，0：未锁车，1：锁车" />
        </el-form-item> -->
        <el-form-item label="状态" prop="workState">
          <el-input v-model="form.workState" placeholder="请输入状态" />
        </el-form-item>
        <el-form-item label="位置更新时间" prop="locationUpdateTime">
          <el-date-picker clearable v-model="form.locationUpdateTime" type="date" value-format="yyyy-MM-dd"
            placeholder="请选择位置更新时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="图片" prop="tupian">
          <el-upload ref="upload" :limit="5" accept=".jpg, .png" name="file" :action="upload.url" multiple
            :headers="upload.headers" :file-list="upload.fileList" :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess" :on-remove="removeFile" :on-preview="handlePreview" :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px" size="small" type="success" :loading="upload.isUploading"
              @click="submitUpload">上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 预览对话框 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="预览图片" />
    </el-dialog>

    <!-- 吊车详情页面 -->
    <el-dialog title="吊车详情" :visible.sync="detailOpen" width="1200px" height="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-row>
          <el-card class="box-card">
            <el-col :span="6">
              <div class="grid-content bg-purple-dark">
                <el-image style="width: 100px; height: 100px" :src="imageUrl" :fit="fit"></el-image>
                <br />
                预计完成项目时间：2024-09-25<br />
                年检时间：2023-06-09<br />
                保险：这是一条保险记录<br />
                位置：广东省深圳市福田区龙华镇中心大道福田区龙华镇中心大道<br />
                创建时间：2023-06-09 13:05:06<br />
              </div>
            </el-col>
            <el-col :span="18">
              <div class="grid-content bg-purple-dark">
                <el-col :span="6">
                  <el-form-item label="设备型号：" prop="carNo">
                    <el-input v-model="form.carNo" placeholder="请输入车号" style="width: 110px" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="发动机：" prop="carBrand">
                    <el-input v-model="form.carBrand" placeholder="请输入车辆品牌" style="width: 110px" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="起重力矩：" prop="carPlate">
                    <el-input v-model="form.carPlate" placeholder="请输入车牌" style="width: 110px" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="发动机：" prop="carYear">
                    <el-input v-model="form.carYear" placeholder="请输入车辆年限" style="width: 110px" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="品牌：" prop="carModel">
                    <el-input v-model="form.carModel" placeholder="请输入车型" style="width: 110px" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="吨位" prop="carWeight">
                    <el-input v-model="form.carWeight" placeholder="请输入吨位" style="width: 110px" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="年限：" prop="basicCharge">
                    <el-input v-model="form.basicCharge" placeholder="请输入收费标准" style="width: 110px" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="车号：" prop="carQty">
                    <el-input v-model="form.carQty" placeholder="请输入数量" style="width: 110px" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="状态：" prop="basicCharge">
                    <el-input v-model="form.basicCharge" placeholder="请输入收费标准" style="width: 110px" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="现场工况/30M：" prop="carQty">
                    <el-input v-model="form.carQty" placeholder="请输入数量" style="width: 110px" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="主臂长度：" prop="basicCharge">
                    <el-input v-model="form.basicCharge" placeholder="请输入收费标准" style="width: 110px" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="主臂+副臂长度：" prop="carQty">
                    <el-input v-model="form.carQty" placeholder="请输入数量" style="width: 110px" />
                  </el-form-item>
                </el-col>
              </div>
            </el-col>
          </el-card>
        </el-row>
      </el-form>
      <el-row>
        <el-col :span="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>更多图片</span>
            </div>
            <div class="grid-content bg-purple-dark">
              <!-- <div>
            <img v-for="image in images" :src="image.url" :key="image.id" alt="图片" width="200px" height="200px" >
          </div> -->

              <el-image v-for="(image, index) in images" :key="index" :src="image.url" class="image-item"
                :preview-src-list="srcList">
              </el-image>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="车辆维护" name="first">

              <el-table v-loading="loading" :data="maintainList" @selection-change="handleSelectionChange">
                <el-table-column label="维护记录ID" align="center" prop="id" />
                <el-table-column label="车辆ID" align="center" prop="carId" />
                <el-table-column label="车辆编号" align="center" prop="carNo" />
                <el-table-column label="维护方式" align="center" prop="maintainMode" />
                <el-table-column label="司机ID" align="center" prop="driverId" />
                <el-table-column label="司机名称" align="center" prop="driverName" />
                <el-table-column label="维护时间" align="center" prop="maintainTime" width="180">
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.maintainTime, '{y}-{m}-{d}') }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="维护备注" align="center" prop="memo" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                      v-hasPermi="['system:maintain:edit']">修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                      v-hasPermi="['system:maintain:remove']">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>

            </el-tab-pane>
            <el-tab-pane label="加油记录" name="second">
              <el-table v-loading="loading" :data="oilList">
                <el-table-column label="加油记录ID" align="center" prop="id" />
                <el-table-column label="车辆ID" align="center" prop="carId" />
                <el-table-column label="车辆编号" align="center" prop="carNo" />
                <el-table-column label="加油数量" align="center" prop="oilQty" />
                <el-table-column label="加油费用" align="center" prop="oilMoney" />
                <el-table-column label="加 油时间" align="center" prop="addTime" width="180">
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.addTime, '{y}-{m}-{d}') }}</span>
                  </template>
                </el-table-column>
              </el-table> </el-tab-pane>
            <el-tab-pane label="验收记录" name="third">
              <el-table v-loading="loading" :data="acceptList" @selection-change="handleSelectionChange">
                <el-table-column label="验收ID" align="center" prop="id" />
                <el-table-column label="车辆ID" align="center" prop="carId" />
                <el-table-column label="车辆编号" align="center" prop="carNo" />
                <el-table-column label="验收人ID" align="center" prop="checkPersonId" />
                <el-table-column label="验收人姓名" align="center" prop="checkPersonName" />
                <el-table-column label="验收状态" align="center" prop="checkResult" />
                <el-table-column label="验收备注" align="center" prop="checkMemo" />
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="关联订单" name="fourth">
              <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
                <el-table-column label="订单ID" align="center" prop="id" />
                <el-table-column label="订单号" align="center" prop="orderNo" />
                <el-table-column label="下单用户ID" align="center" prop="userId" />
                <el-table-column label="下单用户姓名" align="center" prop="userName" />
                <el-table-column label="车辆ID" align="center" prop="carId" />
                <el-table-column label="车辆编号" align="center" prop="carNo" />
                <el-table-column label="车辆数量 " align="center" prop="carQty" />
                <el-table-column label="${comment}" align="center" prop="addDriverQty" />
                <el-table-column label="路基箱数量" align="center" prop="subgradeBoxQty" />
                <el-table-column label="吊车吨位" align="center" prop="carWeight" />
                <el-table-column label="机长数量" align="center" prop="captain" />
                <el-table-column label="施工方式" align="center" prop="chargeType" />
                <el-table-column label="入场时间" align="center" prop="beginTime" width="180">
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.beginTime, '{y}-{m}-{d}') }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="结束时间" align="center" prop="endTime" width="180">
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="取车时间" align="center" prop="pickCarTime" width="180">
                  <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.pickCarTime, '{y}-{m}-{d}') }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="付款方式 0：0天，30：30天，60：60天，90：90天" align="center" prop="payType" />
                <el-table-column label="保险" align="center" prop="insurance" />
                <el-table-column label="维护" align="center" prop="upkeep" />
                <el-table-column label="工作时长" align="center" prop="workMonth" />
                <el-table-column label="地址ID" align="center" prop="workAddressId" />
                <el-table-column label="地址" align="center" prop="workAddress" />
                <el-table-column label="施工场景" align="center" prop="workEnv" />
                <el-table-column label="工作内容" align="center" prop="workContent" />
                <el-table-column label="是否有保证金 0：没有，1：有" align="center" prop="earnestMoneyFlag" />
                <el-table-column label="保证金" align="center" prop="earnestMoney" />
                <el-table-column label="折扣" align="center" prop="discount" />
                <el-table-column label="税率" align="center" prop="rate" />
                <el-table-column label="运输方式" align="center" prop="shipMode" />
                <el-table-column label="增配驾驶员" align="center" prop="addDriver" />
                <el-table-column label="增配驾驶员金额" align="center" prop="addDriverPrice" />
                <el-table-column label="就餐" align="center" prop="eat" />
                <el-table-column label="住宿" align="center" prop="sleep" />
                <el-table-column label="燃油" align="center" prop="oil" />
                <el-table-column label="拆卸人工" align="center" prop="dismantlePerson" />
                <el-table-column label="拆卸辅助吊车" align="center" prop="dismantleCar" />
                <el-table-column label="组装辅助吊车" align="center" prop="packageCar" />
                <el-table-column label="安装人工" align="center" prop="installPerson" />
                <el-table-column label="年检检测" align="center" prop="yearCheck" />
                <el-table-column label="委托检测" align="center" prop="entrustCheck" />
                <el-table-column label="环保检测" align="center" prop="envCheck" />
                <el-table-column label="使用登记证" align="center" prop="certificate" />
                <el-table-column label="体检" align="center" prop="medical" />
                <el-table-column label="总金额" align="center" prop="totalPrice" />
                <el-table-column label="司机ID" align="center" prop="driverId" />
                <el-table-column label="司机名称" align="center" prop="driverName" />
                <el-table-column label="合同编号" align="center" prop="contractNo" />
                <el-table-column label="${comment}" align="center" prop="invoice" />
                <el-table-column label="订单状态" align="center" prop="orderState" />
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 用户导入对话框 -->
    <el-dialog :title="uploadExcel.title" :visible.sync="uploadExcel.open" width="400px">
      <el-upload ref="uploadExcel" :limit="1" accept=".xlsx, .xls" :headers="uploadExcel.headers"
        :action="uploadExcel.url + '?updateSupport=' + uploadExcel.updateSupport" :disabled="uploadExcel.isUploading"
        :on-progress="handleFileUploadProgressExcel" :on-success="handleFileSuccessExcel" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <el-checkbox v-model="uploadExcel.updateSupport" />是否更新已经存在的用户数据
          <el-link type="info" style="font-size:12px" @click="importTemplateExcel">下载模板</el-link>
        </div>
        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileFormExcel">确 定</el-button>
        <el-button @click="uploadExcel.open = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改汽车维护对话框 -->
    <el-dialog title="车辆维护" :visible.sync="repairOpen" width="500px" append-to-body>
      <el-form ref="repairForm" :model="repairForm" :rules="repairFormRules" label-width="80px">
        <!-- <el-form-item label="车辆ID" prop="carId">
          <el-input v-model="repairForm.carId" placeholder="请输入车辆ID" />
        </el-form-item>
        <el-form-item label="车辆编号" prop="carNo">
          <el-input v-model="repairForm.carNo" placeholder="请输入车辆编号" />
        </el-form-item> -->
        <el-form-item label="维护时间" prop="maintainTime">
          <el-date-picker clearable v-model="repairForm.maintainTime" type="date" value-format="yyyy-MM-dd"
            placeholder="请选择维护时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="维护方式" prop="maintainMode">
          <el-input v-model="repairForm.maintainMode" placeholder="请输入维护方式" />
        </el-form-item>
        <el-form-item label="司机ID" prop="driverId">
          <el-input v-model="repairForm.driverId" placeholder="请输入司机ID" />
        </el-form-item>
        <el-form-item label="司机名称" prop="driverName">
          <el-input v-model="repairForm.driverName" placeholder="请输入司机名称" />
        </el-form-item>

        <el-form-item label="维护备注" prop="memo">
          <el-input v-model="repairForm.memo" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitRepairForm">确 定</el-button>
        <el-button @click="cancelRepair">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改车辆验收对话框 -->
    <el-dialog title="车辆验收" :visible.sync="acceptOpen" width="500px" append-to-body>
      <el-form ref="acceptForm" :model="acceptForm" :rules="acceptRules" label-width="80px">
        <!-- <el-form-item label="车辆ID" prop="carId">
          <el-input v-model="acceptForm.carId" placeholder="请输入车辆ID" />
        </el-form-item>
        <el-form-item label="车辆编号" prop="carNo">
          <el-input v-model="acceptForm.carNo" placeholder="请输入车辆编号" />
        </el-form-item>
        <el-form-item label="验收人ID" prop="checkPersonId">
          <el-input v-model="acceptForm.checkPersonId" placeholder="请输入验收人ID" />
        </el-form-item>
        <el-form-item label="验收人姓名" prop="checkPersonName">
          <el-input v-model="acceptForm.checkPersonName" placeholder="请输入验收人姓名" />
        </el-form-item> -->
        <el-form-item label="验收时间" prop="maintainTime">
          <el-date-picker clearable v-model="acceptForm.createTime" type="date" value-format="yyyy-MM-dd"
            placeholder="验收时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="验收状态" prop="checkResult">
          <el-input v-model="acceptForm.checkResult" placeholder="请输入验收状态" />
        </el-form-item>
        <el-form-item label="验收备注" prop="checkMemo">
          <el-input v-model="acceptForm.checkMemo" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAcceptForm">确 定</el-button>
        <el-button @click="cancelAccept">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  listDetail,
  getDetail,
  delDetail,
  addDetail,
  updateDetail,
  importTemplate
} from "@/api/system/detail";
import { getToken } from "@/utils/auth";

export default {
  name: "Detail",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 吊车列表格数据
      detailList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //创建日期搜索
      dateRange: [],

      //详情页面
      detailOpen: false,



      activeName: 'first',

      //更多图片
      images: [
        {
          id: 1,
          url: "http://8.129.39.183/profile/upload/2024/09/26/bsj_20240926074315A004.jpg",
        },
        {
          id: 2,
          url: "http://8.129.39.183/profile/upload/2024/09/26/bsj_20240926074315A004.jpg",
        },
        {
          id: 3,
          url: "http://8.129.39.183/profile/upload/2024/09/26/bsj_20240926074315A004.jpg",
        },
        {
          id: 1,
          url: "http://8.129.39.183/profile/upload/2024/09/26/bsj_20240926074315A004.jpg",
        },
        {
          id: 2,
          url: "http://8.129.39.183/profile/upload/2024/09/26/bsj_20240926074315A004.jpg",
        },
        {
          id: 3,
          url: "http://8.129.39.183/profile/upload/2024/09/26/bsj_20240926074315A004.jpg",
        },
        {
          id: 1,
          url: "http://8.129.39.183/profile/upload/2024/09/26/bsj_20240926074315A004.jpg",
        },
        {
          id: 2,
          url: "http://8.129.39.183/profile/upload/2024/09/26/bsj_20240926074315A004.jpg",
        },
        {
          id: 3,
          url: "http://8.129.39.183/profile/upload/2024/09/26/bsj_20240926074315A004.jpg",
        },
      ],
      //汽车左上角主图
      imageUrl:
        "http://8.129.39.183/profile/upload/2024/09/26/bsj_20240926074315A004.jpg",

      //编辑时查看上传的图片列表
      srcList: [

      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        carNo: null,
        carBrand: null,
        carPlate: null,
        carYear: null,
        carModel: null,
        carWeight: null,
        basicCharge: null,
        carQty: null,
        address: null,
        location: null,
        mainArmLength: null,
        holdWeight: null,
        checkTime: null,
        insurance: null,
        chargePersonId: null,
        chargePersonName: null,
        lockState: null,
        workState: null,
        locationUpdateTime: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},

      //汽车维护
      repairOpen: false,

      repairForm: {},

      repairRules: {},

      //汽车验收
      acceptOpen: false,

      acceptForm: {},

      acceptRules: {},


      upload: {
        // 是否禁用上传
        isUploading: false,

        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/common/upload",
        // 上传的文件列表
        fileList: [],
      },

      // 用户导入excel的参数
      uploadExcel: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/detail/importData"
      },
      dialogImageUrl: "",

      dialogVisible: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询吊车列列表 */
    getList() {
      this.loading = true;
      listDetail(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
        this.detailList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        carNo: null,
        carBrand: null,
        carPlate: null,
        carYear: null,
        carModel: null,
        carWeight: null,
        basicCharge: null,
        carQty: null,
        address: null,
        location: null,
        mainArmLength: null,
        holdWeight: null,
        checkTime: null,
        insurance: null,
        chargePersonId: null,
        chargePersonName: null,
        lockState: null,
        workState: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        locationUpdateTime: null,
        fileList: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加吊车";
      this.upload.fileList = [];
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;

      getDetail(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改吊车列";
        var fileUrlStr = response.data.fileUrlStr;
        var fileObj = JSON.parse(fileUrlStr);
        this.upload.fileList = fileObj;
      });
    },



    /** 提交按钮 */
    submitForm() {
      console.log("提交开始");

      this.$refs["form"].validate((valid) => {
        if (valid) {
          // this.form.fileList=this.upload.fileList;
          // var files= this.form.fileList;
          // var fileUrls=[];
          // for(var i=0;i<files.length;i++){
          //   fileUrls.push(files[i].url)
          // }
          // var fileUrlStr=fileUrls.join(",");
          // console.log(fileUrls)
          var fileUrlStr = JSON.stringify(this.form.fileList);
          this.form.fileUrlStr = fileUrlStr;
          //console.log(JSON.stringify(this.form.fileList));
          if (this.form.id != null) {
            updateDetail(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addDetail(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除吊车列编号为"' + ids + '"的数据项？')
        .then(function () {
          return delDetail(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "system/detail/export",
        {
          ...this.queryParams,
        },
        `detail_${new Date().getTime()}.xlsx`
      );
    },

    // 文件删除的钩子
    removeFile(file, fileList) {
      console.log(file);
      console.log(fileList);
      this.upload.fileList = fileList;
      this.form.fileList = fileList;
    },

    // 文件提交处理
    submitUpload() {
      this.$refs.upload.submit();
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      console.log(response);
      file.url = response.url;
      console.log(fileList);
      //console.log(fileList)
      this.upload.isUploading = false;
      this.form.fileList = fileList;

      //this.form.filePath = response.url;
      //this.msgSuccess(response.msg);
    },

    handlePreview(file) {
      console.log(file);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    handleExceed(files, fileList) {
      this.$message.warning(`最多只能上传5个文件！`);
    },

    //双击查看详情
    dbclick(row) {
      console.log(row);
      this.detailOpen = true;
      const id = row.id || this.ids;
      // getCustomer(id).then(response => {
      //   this.form = response.data;
      // });

      // listHead({ "customerId": id }).then(response => {
      //   this.headList = response.rows;
      // });
    },

    //Tab页点击事件
    handleClick(tab, event) {
      console.log(tab, event);
    },

    /** 导入按钮操作 */
    handleImport() {
      this.uploadExcel.title = "用户导入";
      this.uploadExcel.open = true;
    },
    /** 下载模板操作 */
    importTemplateExcel() {
      this.download('system/detail/importTemplate', {
      }, `carInfo_template_${new Date().getTime()}.xlsx`)
    },
    // excel文件上传中处理
    handleFileUploadProgressExcel(event, file, fileList) {
      this.uploadExcel.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccessExcel(response, file, fileList) {
      this.uploadExcel.open = false;
      this.uploadExcel.isUploading = false;
      this.$refs.uploadExcel.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileFormExcel() {
      this.$refs.uploadExcel.submit();
    },

    //车辆维护
    handleRepair() {
      this.repairOpen = true;
    },

    submitRepairForm() {
      this.$refs["repairForm"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            // updateMaintain(this.form).then(response => {
            //   this.$modal.msgSuccess("修改成功");
            //   this.open = false;
            //   this.getList();
            // });
          } else {
            // addMaintain(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.repairOpen = false;
            //   this.getList();
            // });
          }
        }
      });
    },

    // 取消按钮
    cancelRepair() {
      this.repairOpen = false;
      //this.reset();
    },

    //车辆验收
    handleAccept(row) {
      const id = row.id || this.ids;
      this.acceptOpen = true;
    },

    submitAcceptForm() {
      this.$refs["acceptForm"].validate(valid => {
        if (valid) {
          if (this.acceptForm.id != null) {
            // updateMaintain(this.form).then(response => {
            //   this.$modal.msgSuccess("修改成功");
            //   this.open = false;
            //   this.getList();
            // });
          } else {
            // addMaintain(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.acceptOpen = false;
            //   this.getList();
            // });
          }
        }
      });
    },

    // 取消按钮
    cancelAccept() {
      this.acceptOpen = false;
      //this.reset();
    },
  },
};
</script>

<style>
.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  /* 设置间隔距离 */
}

.image-item {
  /* 根据需要设置图片样式 */
  width: 150px;
  height: 150px;
  margin-left: 10px;
}
</style>
